<template>
  <page-layout>
    <template #title>
      <div class="layout-flex">
        <div class="layout-inline">
          <el-input v-model="queryObj.projectName" placeholder="项目名称" :style="{ width: '290px' }"></el-input>
        </div>
        <div class="layout-inline">
          <add-button :on-click="handleAddClick"></add-button>
        </div>
      </div>
    </template>
    <card-panel>
      <el-table-block2
        :column="column"
        :data="rows"
        border
        :pagination="true"
        :currentPage="pagination.pageNo"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        @currentChange="handleCurrentChange"
      />
    </card-panel>
    <edit-input ref="EditInput1" :success="getData" v-bind="$props"></edit-input>
  </page-layout>
</template>

<script>
import { speechDelete, speechPageList } from '@/api/airApi'
import EditInput from './components/EditInput'

export default {
  name: 'index',
  props: {
    monitorType: {
      type: String,
      default: 'airtype'
    }
  },
  components: {
    EditInput
  },
  data() {
    return {
      pagination: {
        total: 0,
        pageNo: 1,
        pageSize: 15
      },
      queryObj: {
        monitorType: this.monitorType,
        projectName: ''
      },
      column: [
        { label: '项目名称', prop: 'projectName', align: 'center' },
        { label: '项目编号', prop: 'projectNum', align: 'center' },
        // { label: '报告/附件', prop: 'attacheList', align: 'center' },
        { label: '备注', prop: 'mark', align: 'center' },
        {
          label: '操作',
          prop: '操作',
          align: 'center',
          width: 300,
          renderBody: (h, { row, $index }) => {
            return (
              <div>
                <el-link
                  type="primary"
                  className="color-base"
                  onClick={() => {
                    this.openEditInput(row)
                  }}
                >
                  修改
                </el-link>
                <split-vline class="margin-left-15 margin-right-15"></split-vline>
                <el-link
                  type="primary"
                  class="color-base"
                  onClick={() => {
                    this.removeRow(row)
                  }}
                >
                  删除
                </el-link>
              </div>
            )
          }
        }
      ],
      rows: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleCurrentChange(v) {
      this.pagination.pageNo = v
      this.getData()
    },
    getData() {
      const { monitorType } = this
      const { pageNo, pageSize } = this.pagination
      const { startTime, endTime } = this.queryObj
      const queryObj = Object.assign({}, this.queryObj, {
        monitorType,
        pageNo,
        pageSize
      })
      speechPageList(queryObj).then(res => {
        this.rows = res.rows
        this.pagination.total = res.total
      })
    },
    handleAddClick() {
      this.openEditInput(null)
    },
    openEditInput(row) {
      this.$refs.EditInput1.open(row)
    },
    removeRow(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { monitorType } = this
        const queryObj = {
          id: row.id,
          monitorType
        }
        speechDelete(queryObj).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.getData()
        })
      })
    }
  },
  watch: {
    queryObj: {
      handler() {
        this.getData()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
